{include file="public/header" /}
<link rel="stylesheet" href="/static/index/css/page/transfer.css">
<body>
<div class="build-navbar"
     data-title="我要转换"
     data-transparent
     data-color="#fff"
     data-lcolor="#fff"
     data-right="转换记录,{:url('exchange/record')}"
     data-rcolor="#fff"
></div>

<div class="main">
    <img src="/static/index/images/bg/bg_wyzztop@2x.png" alt="" class="img-top"/>
    <form class="layui-form" action="{:url('exchange/save')}" lay-filter="lay-form">
        <div class="middle mx-30 ">

            <div class="col flex flex-col p-30 bg-f6" style="border-bottom: 1px solid var(--ee)">
                <div class="top flex items-center ">
                    <img src="/static/index/images/exchange/out.png" alt="" class="icon">
                    <span>转出账户</span>
                </div>
                <div class="bottom flex justify-between items-center" lay-click="account">
                    <div class="text flex items-center">请选择转出账户</div>
                    <i class="layui-icon layui-icon-right"></i>
                </div>
                <input type="hidden" name="account" placeholder="请选择转出账户" class="account" lay-verify="req"/>
            </div>
            <div class="col flex flex-col p-30 bg-f6">
                <div class="top flex items-center ">
                    <img src="/static/index/images/exchange/enter.png" alt="" class="icon">
                    <span>转入账户</span>
                </div>
                <div class="bottom flex justify-between items-center" lay-click="take_account">
                    <div class="text flex items-center silent">请选择转入账户</div>
                    <i class="layui-icon layui-icon-right"></i>
                </div>
                <input type="hidden" name="take_account" placeholder="请选择转入账户" class="take_account"
                       lay-verify="req"/>
            </div>

            <div class="col flex  flex-col p-30">
                <div class="top">转入金额</div>
                <div class="bottom">
                    <input type="number" name="amount" placeholder="请填写转入金额" lay-verify="req"
                           autocomplete="off"/>
                </div>
            </div>
        </div>

        <div class="btn theme-btn radius-14" data-password lay-event="formSubmit">确认转账</div>
    </form>
</div>

</body>
{include file="public/footer"/}
<script>
    layui.extend({picker: "{/}/static/index/js/core/picker"}).use(['picker', 'methods', 'listen'], function (d) {
        var a = layui.jquery, ly = layui.layer, picker = layui.picker, m = layui.methods, take_account = [];
        m.event.click(['account', 'take_account'], function (data, that) {
            picker.render(JSON.parse('<?php echo json_encode($account);?>'), function (d) {
                that.children('.text').html(d.title + ' <span class="diff">(剩余：' + d.balance + ')</span>').css('color', 'var(--dcl)');
                a('.account').val(d.type)
                a('.silent').html('请选择转入账户').css('color', 'var(--c9)');
                take_account = d.child;
            });
        }, function (data, that) {
            if (!take_account.length) {
                ly.msg('请先选择转出账户');
                return false
            }
            picker.render(take_account, function (d) {
                that.children('.text').html(d.title).css('color', 'var(--dcl)');
                a('.take_account').val(d.type)
            });
        });

    });
</script>
</html>